<template>
    <div class="complain-detail">
        <div class="nav">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{  }"><span class="">{{$t('orderService')}}</span></el-breadcrumb-item>
                <el-breadcrumb-item>{{$t('complaints')}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="info">
            <p>{{$t('HousingInfo')}}</p>
            <div class="houseInfo">
                <div>
                    <p><span class="key">{{$t('ProcessingCategory')}}:</span><span class="value" style="color:#E21010;">{{$t('complaints')}}</span></p>
                    <p><span class="key">{{$t('ComplaintNumber')}}:</span><span class="value">{{detail.complainCode}}</span></p>
                    <p><span class="key">{{$t('NameofTheService')}}:</span><span class="value">{{detail.name}}</span></p>
                    <p><span class="key">{{$t('telephone')}}:</span><span class="value">{{detail.mobile}}</span></p>
                </div>
                <div>
                    <p><span class="key">{{$t('HousingTypes')}}:</span><span class="value">{{detail.leaseType===0 ?
                            $t('Rent'):$t('Sale')}}</span></p>
                    <p><span class="key">{{$t('SourceInfo')}}:</span><span class="value">APP</span></p>
                    <p><span class="key">{{$t('ComplaintsOfTime')}}:</span><span class="value">{{detail.createTime}}</span></p>
                    <p><span class="key">{{$t('address')}}:</span><span class="value">{{detail.city}}{{detail.community}}{{detail.subCommunity}}{{detail.address}}</span></p>
                </div>
            </div>
        </div>
        <div class="complain-info">
            <p>{{$t('ComplaintsContent')}}</p>
            <div class="complain-content d_flex" v-if="detail.complainType==0">
                <el-radio v-model="detail.complainReason" :label="0" disabled><span>{{$t('housingStockLeased')}}</span></el-radio>
                <el-radio v-model="detail.complainReason" :label="1" disabled><span>{{$t('priceOfFalse')}}</span></el-radio>
                <el-radio v-model="detail.complainReason" :label="2" disabled><span>{{$t('picturesOfFalse')}}</span></el-radio>
                <el-radio v-model="detail.complainReason" :label="3" disabled><span>{{$t('propertiesOfFalse')}}</span></el-radio>
                <el-radio v-model="detail.complainReason" :label="4" disabled><span>{{$t('other')}}</span></el-radio>
            </div>
            <div class="complain-content d_flex" v-if="detail.complainType==1">
                <el-radio v-model="detail.complainReason" :label="5" disabled><span>业务员未按约定时间到达</span></el-radio>
                <el-radio v-model="detail.complainReason" :label="6" disabled><span>业务员态度恶劣</span></el-radio>
                <el-radio v-model="detail.complainReason" :label="7" disabled><span>业务员收取额外费用</span></el-radio>
            </div>            
        </div>
        <div class="supplement">
            <p>{{$t('CustomerAdded')}}</p>
            <div class="supplement-info">
                <textarea v-model="detail.complainExplain" disabled></textarea>
            </div>
        </div>
        <div class="credentials">
            <p>{{$t('UploadDocuments')}}</p>
            <div class="upload-conrtol">
                <!-- <el-upload name="submitFile" :file-list="complainProofPicList" action="/api/pc/file/upload" list-type="picture-card"
                :before-upload="beforeUpload" :on-success="handleSuccess">
                <i class="el-icon-plus"></i>
              </el-upload> -->
                <img v-if="detail.complainProofPic1" v-bind:src="detail.complainProofPic1" alt="">
                <img v-if="detail.complainProofPic2" v-bind:src="detail.complainProofPic2" alt="">
                <img v-if="detail.complainProofPic3" v-bind:src="detail.complainProofPic3" alt="">
            </div>
        </div>
        <div class="remarks">
            <p><span>{{$t('backOfficeNote')}}</span></p>
            <div class="remarks-info">
                <textarea v-model="detail.remarkBackOffice" disabled></textarea>
            </div>
        </div>
        <div class="remarks">
            <p><span>{{$t('financialNote')}}</span></p>
            <div class="remarks-info">
                <textarea v-model="detail.remarkFinance" disabled></textarea>
            </div>
        </div>
        <div class="remarks">
            <p><span>{{$t('lookOutNote')}}</span></p>
            <div class="remarks-info">
                <textarea v-model="detail.remarkLookOutside" disabled></textarea>
            </div>
        </div>
        <div class="remarks">
            <p><span>{{$t('outsideNote')}}</span></p>
            <div class="remarks-info">
                <textarea v-model="detail.remarkOutOf" disabled></textarea>
            </div>
        </div>
        <div class="remarks">
            <p><span>{{$t('regionalLong')}}</span></p>
            <div class="remarks-info">
                <textarea v-model="detail.remarkKeyManager" disabled></textarea>
            </div>
        </div>
        <div class="remarks">
            <p><span>{{$t('noteOfTheService')}}</span></p>
            <div class="remarks-info">
                <textarea v-model="detail.remark" disabled></textarea>
            </div>
        </div>
        <div class="footer">
            <el-button @click="setFalse">{{$t('untruth')}}</el-button>
            <el-button type="primary" @click="setTrue">{{$t('thatIstheCase')}}</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name: "complainDetail",
        props: ["code"],
        data() {
            return {
                checkVisible: false,
                detail: {
                    houseId: null,
                    city: "",
                    remark: "",
                    platform: 0,
                    leaseType: 0,
                    standby5: null,
                    updateBy: null,
                    complainExplain: "",
                    standby2: null,
                    standby1: null,
                    standby4: null,
                    id: null,
                    standby3: null,
                    complainCode: "",
                    complainProofPic1: null,
                    salesmanId: null,
                    complainProofPic2: null,
                    address: "",
                    complainProofPic3: null,
                    languageVersion: 0,
                    mobile: "",
                    updateTime: null,
                    community: "",
                    complainReason: null,
                    subCommunity: "",
                    houseMainImg: "",
                    createBy: null,
                    complainType: 0,
                    createTime: null,
                    poolId: null,
                    name: "",
                    status: 0
                },
                // complainProofPicList: []//凭证图片列表
                postUrl:"",
                routeName:''
            };
        },
        mounted(){
            if(this.$route.query&&this.$route.query.type ){
                this.postUrl = '/api/pc/finance/complaint/order/update';
                this.routeName = 'financeComplain';
            }else{
                this.postUrl = '/api/pc/internal/complaint/order/update';
                this.routeName = 'internalComplain';
            }
        },
        methods: {
            setTrue() {
                this.$prompt(this.$t('Pleaseentertheremark'), this.$t('prompt'), {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel'),
                }).then(({ value }) => {
                    let loadingInstance = this.$Loading.service({ fullscreen: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(56, 53, 53, 0.6)' });
                    this.$axios.post(this.postUrl, this.$qs.stringify({ id: this.detail.id,isVerified:1,remark: value }))
                        .then(res => this.$router.push({ name: this.routeName }))
                        .catch(err => this.$message.error(err.message))
                        .finally(() => this.$nextTick(() => {
                            loadingInstance.close();
                        }));
                }).catch(()=>{});
            },
            setFalse() {
                this.$prompt(this.$t('Pleaseentertheremark'), this.$t('prompt'), {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel'),
                }).then(({ value }) => {
                    let loadingInstance = this.$Loading.service({ fullscreen: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(56, 53, 53, 0.6)' });
                    this.$axios.post(this.postUrl, this.$qs.stringify({ id: this.detail.id,isVerified:2, remark: value }))
                        .then(res => this.$router.push({ name: this.routeName }))
                        .catch(err => this.$message.error(err.message))
                        .finally(() => this.$nextTick(() => {
                            loadingInstance.close();
                        }));
                }).catch(()=>{});
            },
            /**
            beforeUpload() {// before上传凭证
              if (this.detail.complainProofPic3)
                return false;
              else
                return true;
            },
            handleSuccess(res,file) {//success上传凭证
              if (!this.detail.complainProofPic1) {
                this.detail.complainProofPic1= res.fid;
              } else if (!this.detail.complainProofPic2) {
                this.detail.complainProofPic2 = res.fid;
              } else if (!this.detail.complainProofPic3) {
                this.detail.complainProofPic3 = res.fid;
              }
            }
            */
        },
        beforeMount() {
            //console.log("投诉id:", this.$props.code);
            let loadingInstance = this.$Loading.service({ fullscreen: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(56, 53, 53, 0.6)' });
            this.$axios
                .post(`/api/pc/house/complain/detail/${this.$props.code}`)
                .then(res => this.detail = res.dataSet ? res.dataSet : this.detail)
                .catch(err => this.$message.error(err.message))
                .finally(() => this.$nextTick(() => {
                    loadingInstance.close();
                }));
        }
    };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .complain-detail {
        >.info {
            >p {
                height: 14px;
                display: flex;
                align-items: center;
                border-left: 2px solid #00B660;
                text-indent: 3px;
                margin: 20px 0;
                padding: 0;
                color: #333333;
                font-size: 14px;
            }

            >.houseInfo {
                height: 200px;
                background: rgba(247, 247, 247, 1);
                border-radius: 3px;
                margin-left: 6px;
                padding-left: 62px;
                display: flex;

                >div {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-right: 120px;

                    >p {
                        >.key {
                            color: #666666;
                            font-size: 12px;
                            margin-right: 3px;
                        }

                        >.value {
                            color: #333333;
                            font-size: 14px;
                        }
                    }

                }

            }
        }

        >.complain-info {
            >p {
                height: 14px;
                display: flex;
                align-items: center;
                ;
                border-left: 2px solid #00B660;
                text-indent: 3px;
                color: #333333;
                font-size: 14px;
                margin: 40px 0 20px 0;
            }

            >.complain-content {
                padding-left: 66px;
                display: flex;
                align-items: center;

                >p {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin: 0 212px 0 0;
                    width: 100px;
                    height: 55px;

                    >span {
                        color: #333333;
                        font-size: 14px;
                    }
                }
            }
        }

        >.supplement {
            >p {
                height: 14px;
                display: flex;
                align-items: center;
                border-left: 2px solid #00B660;
                text-indent: 3px;
                color: #333333;
                font-size: 14px;
                margin: 20px 0;
            }

            >.supplement-info {
                margin-left: 6px;

                >textarea {
                    width: 100%;
                    height: 80px;
                    background: rgba(247, 247, 247, 1);
                    border-radius: 3px;
                    resize: none;
                }
            }
        }

        >.credentials {
            >p {
                height: 14px;
                display: flex;
                align-items: center;
                border-left: 2px solid #00B660;
                text-indent: 3px;
                color: #333333;
                font-size: 14px;
                margin: 40px 0 20px 0;
            }

            >.upload-conrtol {
                margin-left: 6px;
                height: 100px;

                >img {
                    width: 100px;
                    height: 100px;
                    margin: 0 10px 0 0;
                }
            }
        }

        >.remarks {
            >p {
                height: 14px;
                display: flex;
                align-items: center;
                border-left: 2px solid #00B660;
                text-indent: 3px;
                color: #333333;
                font-size: 14px;
                margin: 40px 0 20px 0;

                >span {
                    color: #E21010;
                    font-size: 12px;
                    margin-left: 17px;
                }
            }

            >.remarks-info {
                margin-left: 6px;

                >textarea {
                    width: 100%;
                    height: 120px;
                    background: rgba(247, 247, 247, 1);
                    border-radius: 3px;
                    resize: none;
                }
            }
        }

        .footer {
            margin-top: 40px;
            display: flex;
            justify-content: center;
        }
    }
</style>